<style lang="less" scoped>
  @import "../styles/main.less";
</style>
<template>
  <div class="app-main">
    <Layout>
      <!--头部-->
      <Header style="position: fixed; width: 100%; top: 0; margin-bottom: 60px; z-index: 1000;">
        <Menu mode="horizontal" theme="primary" :active-name="headerMenu" class="header-con" @on-select="menuChange">
          <div class="header-con-info">
            <div class="header-con-logo">
              <img class="icon" alt="" src="/assets/logo.png">
            </div>
            <div class="sep-line"></div>
            <div class="header-con-title">
              <p class="title">Vue-Admin</p>
              <p class="sub-title">Attack situation system management platform</p>
            </div>
          </div>

          <div class="header-user-info">
            <full-screen v-model="isFullScreen" @on-change="fullscreenChange"></full-screen>
            <div class="user-dropdown-menu-con">
              <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
              <Dropdown trigger="hover" @on-click="handleClickUserDropdown">
                <a href="javascript:void(0)">
                  {{ userInfo.nickname }}
                  <Icon type="arrow-down-b"></Icon>
                </a>
                <DropdownMenu slot="list" >
                  <DropdownItem name="user-page">个人中心</DropdownItem>
                  <DropdownItem name="logout">安全退出</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </div>
          </div>

          <div class="header-con-menu">
            <Menu-item v-for="(item, index) in topMenuList" :key="index" class="menu-item" :name="item.name">
              <Icon v-if="item.icon" :type="item.icon"></Icon>
              {{ item.title }}
            </Menu-item>
          </div>
        </Menu>
        <div style="clear: both"></div>
      </Header>
      <!--头部 END-->
      <Layout style="margin-top: 65px;">
        <!-- 左侧菜单 -->
        <Sider hide-trigger class="sider-menu" v-if="shrink===true">
          <Menu :active-name="siderMenu" theme="light" width="auto" :open-names="openMenuNames" @on-select="menuChange">
            <Submenu v-for="item in leftMenuList" :name="item.name" v-if="item.children.length > 0">
              <template slot="title" v-if="item.children">
                <Icon v-if="item.icon" :type="item.icon"></Icon>
                {{ item.title }}
              </template>
              <MenuItem v-for="child in item.children" :name="child.name">
                <Icon v-if="child.icon" :type="child.icon"></Icon>
                {{ child.title }}
              </MenuItem>
            </Submenu>
            <MenuItem v-else :name="item.name">
              <Icon v-if="item.icon" :type="item.icon"></Icon>
              {{ item.title }}
            </MenuItem>
          </Menu>
        </Sider>
        <Sider hide-trigger class="sider-min-menu" v-if="shrink===false" width="60">
          <Menu :active-name="minSiderMenu" theme="light" width="auto" :open-names="openMenuNames" @on-select="minMenuChange">
            <MenuItem v-for="item in leftMenuList" :name="item.name">
              <Icon v-if="item.icon" :type="item.icon"></Icon>
            </MenuItem>
          </Menu>
        </Sider>
        <!-- 左侧菜单 END-->
        <!-- Body -->
        <Layout :style="{padding: '0 12px 12px'}">
          <Breadcrumb :style="{margin: '10px 0'}">
            <div class="arrow-shrink" @click="changeShrink">
              <Icon type="navicon-round" size="20" ></Icon>
            </div>
            <BreadcrumbItem v-for="item in breadcrumbList" :to="item.path">{{ item.title }}</BreadcrumbItem>
          </Breadcrumb>
          <Content :style="{padding: '10px', minHeight: '380px', background: '#fff'}">
            <router-view></router-view>
          </Content>
        </Layout>
        <!-- Body End -->
      </Layout>
    </Layout>
  </div>
</template>
<script>
import fullScreen from './my-components/fullscreen.vue'
import util from '@/libs/util.js'
import Cookies from 'js-cookie'
import profileDataApi from '@/api/system/profile.js'

export default {
  name: 'Main',
  components: {
    fullScreen
  },
  data () {
    return {
      //  当前用户信息
      userInfo: {},
      //  当前模块名称
      currentModuleName: '',
      //  是否开启全屏
      isFullScreen: false,
      //  面包屑列表
      breadcrumbList: [],
      //  菜单是否展开 true 展开 false 隐藏
      shrink: true,
      //  展开的菜单集合
      openMenuNames: [],

      //  开启菜单激活项
      headerMenu: '',
      siderMenu: '',
      minSiderMenu: ''
    }
  },
  computed: {
    topMenuList () {
      return this.$store.state.app.topMenuList
    },
    leftMenuList () {
      return this.$store.state.app.leftMenuList
    }
  },
  methods: {
    init () {
      this.userInfo = util.jsonParse(Cookies.get('userInfo'))
      //  初始化设置
      let currentPathList = this.$router.history.current.fullPath.split('/')
      this.$store.commit('updateLeftMenuList', currentPathList[1])
      this.setBreadcrumbList()
      this.setMenuActive(this.$router.history.current.matched)
    },
    //  菜单点击事件
    menuChange (name) {
      this.$router.push({
        name: name
      })
      //  激活菜单选择项
      this.setMenuActive(this.leftMenuList)
    },
    //  迷你菜单点击
    minMenuChange (name) {
      this.leftMenuList.forEach((item, index) => {
        if (item.name === name) {
          this.shrink = true
          if (item.children.length === 0) {
            this.$router.push({
              name: name
            })
          } else {
            this.setOpenMenuNames(name)
          }
        }
      })
    },
    //  全屏点击事件
    fullscreenChange (isFullScreen) {
    },
    //  设置面包屑
    setBreadcrumbList () {
      let list = this.$router.history.current.matched
      list.forEach((item, index) => {
        if (index > 0) {
          this.breadcrumbList[index-1] = {
            name: item.name,
            path: item.path,
            title: item.meta.title
          }
        }
      })
    },
    //  是否展开收缩
    changeShrink () {
      this.shrink = this.shrink === true ? false : true
      if (this.shrink === false) {
        this.openMenuNames = []
      }
    },
    //  设置菜单展示项
    setOpenMenuNames (name) {
      if (this.openMenuNames.indexOf(name)) {
        this.openMenuNames[this.openMenuNames.length] = name
      }
    },
    //  激活菜单选择项
    setMenuActive (list) {
      if (list.hasOwnProperty(1)) {
        this.headerMenu = list[1].name
      }
      if (list.hasOwnProperty(2)) {
        this.siderMenu = list[2].name
        this.setOpenMenuNames(list[2].name)
      }
      if (list.hasOwnProperty(3)) {
        this.siderMenu = list[3].name
      }
    },

    /**
     * 顶部个人页按钮点击
     * @param name
     */
    handleClickUserDropdown (name) {
      switch (name) {
        case 'logout':
          this.logout()
          break
        case 'user-page':
          this.$Message.error('暂未开通该功能')
          break
      }
    },

    /**
     * 退出系统
     */
    logout () {
      let vm = this
      profileDataApi.logout().then(
        res => {
          vm.$Message.success('安全退出')
        }
      )
      Cookies.remove('token')
      Cookies.remove('userInfo')
      vm.$router.push({
        name: 'login'
      })
    }
  },

  /**
   * 初始化
   */
  created () {
    this.init()
  },
  watch: {
    '$route.path' (path) {
      let moduleName = path.split('/')[1]
      if (moduleName !== this.currentModuleName) {
        this.$store.commit('updateLeftMenuList', path.split('/')[1])
        this.currentModuleName = moduleName
      }
      this.setBreadcrumbList()
    }
  }
}
</script>
